<template>
  <div class="home-view">
    <div class="dashboard">
      <div class="stat-container">
        <StatCard
          v-for="(stat, index) in stats"
          :key="index"
          :statTitle="stat.title"
          :statValue="stat.value"
        />
      </div>
      <Carousel :carousel-items="carouselItems" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import StatCard from '../components/StatCard.vue'
import Carousel from '../components/Carousel.vue'

const stats = ref([
  { title: '今日订单量', value: 10 },
  { title: '今日销售额', value: 500 },
  { title: '新客户数量', value: 5 }
])

const carouselItems = ref([
  { image: '/src/assets/1.jpg' },
  { image: '/src/assets/2.jpg' },
  { image: '/src/assets/3.jpg' },
  { image: '/src/assets/4.jpg' },
  { image: '/src/assets/5.jpg' },
  { image: '/src/assets/6.jpg' }
])
</script>

<style scoped>
.home-view {
  padding: 20px;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.stat-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 768px) {
  .stat-container {
    flex-direction: column;
    align-items: center;
  }
}
</style>